<template>
    <div class="article-container">
        <el-card class="filter-card">
            <div slot="header" class="clearfix">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>内容管理</el-breadcrumb-item>
                </el-breadcrumb>
            </div>

            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="状态">
                    <el-radio-group v-model="status">
                        <el-radio :label="null">全部</el-radio>
                        <el-radio :label="0">草稿</el-radio>
                        <el-radio :label="1">待审核</el-radio>
                        <el-radio :label="2">审核通过</el-radio>
                        <el-radio :label="3">审核失败</el-radio>
                        <el-radio :label="4">已删除</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="频道">
                    <el-select v-model="channelId" placeholder="请选择频道">
                        <el-option v-for="(channel, index) in channels"
                                   :key="index"
                                   :label="channel.name"
                                   :value="channel.id">
                        </el-option>
                        <el-option label="全部" :value="null"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="日期">
                    <el-date-picker
                            v-model="rangeDate"
                            type="datetimerange"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            :default-time="['12:00:00']">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button :disabled="loading" type="primary" @click="loadArticle(1)">查询</el-button>
                </el-form-item>
            </el-form>
        </el-card>


        <el-card class="box-card">
            <div slot="header" class="clearfix">
                根据筛选条件共查询到{{ totalCount }}条结果：
            </div>
            <div>
                <el-table
                        v-loading="loading"
                        class="list-table"
                        stripe
                        :data="articles"
                        style="width: 100%">
                    <el-table-column
                            label="封面">
                        <template slot-scope="scope">
                            <img v-if="scope.row.cover.images[0]" class="article-cover" :src="scope.row.cover.images[0]" alt=" ">
                            <img v-else class="article-cover" src="./no-cover.jpg" alt=" ">
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="title"
                            label="标题">
                    </el-table-column>
                    <el-table-column
                            label="状态"
                            width="180">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.status ===0" type="warning">草稿</el-tag>
                            <el-tag v-if="scope.row.status ===1">待审核</el-tag>
                            <el-tag v-if="scope.row.status ===2" type="success">审核通过</el-tag>
                            <el-tag v-if="scope.row.status ===3" type="danger">审核失败</el-tag>
                            <el-tag v-if="scope.row.status ===4" type="info">已删除</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="pubdate"
                            label="发布时间"
                            width="180">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                type="primary"
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                        :disabled="loading"
                        @current-change="onCurrentChange"
                        background
                        layout="prev, pager, next"
                        :total="totalCount">
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
    import { getArticle, getArticleChannels } from "../../api/article";

    export default {
        name: "Article",
        data() {
            return {
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                articles: [],
                totalCount: 0,
                status: null,
                channels: [],
                channelId : null,
                rangeDate: [],
                loading: true
            }
        },
        created() {
            this.loadArticle(1)
            this.loadArticleChannels()
        },
        methods: {
            loadArticle(page = 1) {
                this.loading = true
                getArticle({
                    page,
                    status: this.status,
                    channel_id: this.channelId,
                    begin_pubdate: this.rangeDate ? this.rangeDate[0] : null,
                    end_pubdate: this.rangeDate ? this.rangeDate[1] : null
                }).then(response => {
                    this.articles = response.data.data.results
                    this.totalCount = response.data.data.total_count
                    this.loading = false
                })
            },
            onCurrentChange(page) {
                this.loadArticle(page)
            },
            loadArticleChannels() {
                getArticleChannels().then(response => {
                    this.channels = response.data.data.channels

                })
            }
        }
    }
</script>

<style scoped>
    .filter-card {
        margin-bottom: 30px;
    }

    .list-table {
        margin-bottom: 20px;
    }

    .article-cover {
        width: 100px;
        background-size: cover;
    }

</style>